<template>
	<!-- 联系作者了解更多详情 -->
	<div class="container">
		<div class="service-card">
			<div class="service-div">
				<text style="font-weight: 600;font-size: 22px;">交流与服务</text>
				<image src="/static/lxzzljgdxqewm.png" alt="QR Code" class="qrcode"></image>
				<text class="text_cn">长按以上二维码联系我</text>
			</div>

			<div style="text-adivgn:left;">
				<div v-for="(item, index) in services" :key="index" class="text_ooo">
					{{ item }}
				</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const services = ref([
		'1. 小程序开发交流',
		'2. 小程序作品咨询与答疑',
		'3. 作品功能迭代建议收集',
		'4. 安装部署协助',
		'5. 新需求定制开发',
		'6. 各种系统平台开发',
		'7. 缴费，支付系统开发'
	])
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #efefef;
		padding: 20px;
	}

	.service-card {
		max-width: 300px;
		/* margin: 0 auto; */
		padding: 20px 50px;
		background-color: #f9f9f9;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.service-div {
		padding: 0px 20px;
		padding-bottom: 15px;
		text-align: center;
	}

	.text_cn {
		color: #5555ff;
		background-color: #d7e3fd;
		padding: 3px 10px;
		border-radius: 6px;
	}

	.qrcode {
		width: 200px;
		height: 200px;
		margin: 15px 0px;
	}

	.text_ooo {
		padding: 5px 0px;
		border-bottom: 1px dashed #ccc;
	}

	.text_ooo:last-child {
		border-bottom: none;
	}
</style>